<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <form id="form" action="${contextPath}/cart/addRoomTypeToCart" role="form" method="post">
                <div class="col-lg-12">
                    <input id="id" name="id"  value="${(roomType.id)!}" type="hidden" class="form-control">
                    <div class="form-group">
                        <label>房间种类</label>
                        <input id="typeName" name="typeName" value="${(roomType.typeName)!}" class="form-control">
                    </div>

                    <div class="form-group">
                        <label>预订数量</label>
                        <input id="qty" name="qty" value="1" class="form-control"  onchange="qtyVlidator()" onfocus="this.select();" autofocus>
                    </div>

                    <div class="col-xs-9">
                        <div class="form-group">
                            <label>变更数量</label>
                            <input id="newQty" type="text" class="form-control" onfocus="qtyVlidator()">
                        </div>
                    </div>

                    <label>变更操作</label>
                    <div class="form-group">
                        <button class="btn btn-default" type="button" id="btn-plus" value="+" onclick="plusOrMinus($(this).val())">+</button>
                        <button class="btn btn-default" type="button" id="btn-minus" value="-" onclick="plusOrMinus($(this).val())">-</button>
                    </div>
                    <label>库存</label><span id="tips"></span>

                    <div align="right">
                        <button id="btn-submit" type="submit" class="btn btn-default">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- /.panel-body -->
</div>
<!-- /.panel -->
<script>
    $(function() {
        $('form').validate({
            submitHandler: function(form) {
                $(form).ajaxSubmit(function(data) {
                    if (data.result) {
                        parent.layer.msg(data.msg, {
                            time: 1000,
                            icon: 1
                        });
                    } else {
                        parent.layer.msg(data.msg, {
                            time: 1000,
                            icon: 2
                        });
                    }
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                });
            }
        });
    });

    function plusOrMinus(value) {
        var qty = $("#qty").val()-0,
            newQty = $('#newQty').val();
        if(value=='+') $('#qty').val(qty + ((newQty=='')?1:(newQty - 0)));
        else $('#qty').val(qty - ((newQty=='')?1:(newQty - 0)));

        $('#newQty').select();
    }


    function qtyVlidator() {
        var qty = $("#qty").val()-0,
//            totalQty = '${(roomType.roomTypeQty)!}'-0,
            totalQty = '20'-0,
            totalIncrement = totalQty - qty;
        if(totalIncrement > 0){
            $("#tips").html(' 数量还剩' + totalIncrement).css("color","green")
        }else {
            $("#qty").val(totalQty);
            $("#tips").html(' 已售空！').css("color","red");
        }
    }

</script>
</body>

</html>